<template>
    <div>
        <div class="i-layout-page-header">
            <PageHeader title="提现申请" hidden-breadcrumb></PageHeader>
        </div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Form ref="formValidate" :model="formValidate" :label-width="labelWidth" :label-position="labelPosition" class="tabform" @submit.native.prevent>
                <Row :gutter="24" type="flex">
                    <Col span="24">
                        <FormItem label="时间选择：">
                            <RadioGroup v-model="formValidate.data" type="button"  @on-change="selectChange(formValidate.data)" class="mr">
                                <Radio :label=item.val v-for="(item,i) in fromList.fromTxt" :key="i">{{item.text}}</Radio>
                            </RadioGroup>
                            <DatePicker :editable="false" @on-change="onchangeTime" :value="timeVal"  format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="自定义时间" style="width: 200px;"></DatePicker>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem label="提现状态：">
                            <RadioGroup type="button" v-model="formValidate.status" class="mr15" @on-change="selChange">
                                <Radio :label="itemn.value" v-for="(itemn,indexn) in treeData.withdrawal" :key="indexn">{{itemn.title}}</Radio>
                            </RadioGroup>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem label="提现方式：">
                            <RadioGroup type="button" v-model="formValidate.extract_type" class="mr15" @on-change="selChange">
                                <Radio :label="itemn.value" v-for="(itemn,indexn) in treeData.payment" :key="indexn">{{itemn.title}}</Radio>
                            </RadioGroup>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem label="搜索：">
                            <Input search enter-button @on-search="selChange" placeholder="微信昵称/姓名/支付宝账号/银行卡号" element-id="name" v-model="formValidate.nireid" style="width: 30%;"/>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        </Card>
        <cards-data :cardLists="cardLists" v-if="extractStatistics"></cards-data>
        <Card :bordered="false" dis-hover>
            <Table
                    ref="table"
                    :columns="columns"
                    :data="tabList"
                    class="ivu-mt"
                    :loading="loading"
                    no-data-text="暂无数据"
                    no-filtered-data-text="暂无筛选结果"
            >
                <template slot-scope="{ row }" slot="nickname">
                    <div>用户昵称: {{row.nickname}} <br> 用户id:{{row.uid}}</div>
                </template>
                <template slot-scope="{ row }" slot="extract_price">
                    <div>{{row.extract_price}}</div>
                </template>
                <template slot-scope="{ row, index }" slot="add_time">
                    <span> {{row.add_time | formatDate}}</span>
                </template>
                <template slot-scope="{ row }" slot="extract_type">
                    <div class="type" v-if="row.extract_type === 'bank'">
                        <div class="item">姓名:{{row.real_name}}</div>
                        <div class="item">银行卡号:{{row.bank_code}}</div>
                        <div class="item">银行开户地址:{{row.bank_address}}</div>
                    </div>
                    <div class="type" v-if="row.extract_type === 'weixin'">
                        <div class="item">昵称:{{row.nickname}}</div>
                        <div class="item">微信号:{{row.wechat}}</div>
                    </div>
                    <div class="type" v-if="row.extract_type === 'alipay'">
                        <div class="item">姓名:{{row.real_name}}</div>
                        <div class="item">支付宝号:{{row.alipay_code}}</div>
                    </div>
                </template>
                <template slot-scope="{ row, index }" slot="qrcode_url">
                    <viewer v-if="row.extract_type === 'weixin' || row.extract_type === 'alipay'">
                        <div class="tabBox_img">
                            <img v-lazy="row.qrcode_url">
                        </div>
                    </viewer>
                </template>
                <template slot-scope="{ row, index }" slot="status">
                    <div class="status" v-if="row.status === 0">
                        <div class="statusVal">未提现</div>
                        <div>
                            <Button type="error" icon="md-close" size="small" class="item" @click="invalid(row)">无效</Button>
                            <Button type="info" icon="md-checkmark" size="small" class="item" @click="adopt(row, '审核通过', index)">通过</Button>
                        </div>
                    </div>
                    <div class="statusVal"  v-if="row.status === 1">提现通过</div>
                    <div class="statusVal"  v-if="row.status === -1">提现未通过<br/>未通过原因：{{row.fail_msg}}</div>
                </template>
                <template slot-scope="{ row }" slot="createModalFrame">
                    <a href="javascript:void(0);" @click="edit(row)">编辑</a>
                </template>
            </Table>
            <div class="acea-row row-right page">
                <Page :total="total" :current="formValidate.page" show-elevator show-total @on-change="pageChange"
                      :page-size="formValidate.limit"/>
            </div>
        </Card>

        <!-- 编辑表单-->
        <edit-from ref="edits" :FromData="FromData" @submitFail="submitFail"></edit-from>
        <!-- 拒绝通过-->
        <Modal v-model="modals"  scrollable   closable title="未通过原因" :mask-closable="false">
            <Input v-model="fail_msg.message" type="textarea" :rows="4" placeholder="请输入未通过原因" />
            <div slot="footer">
                <Button type="primary" size="large" long :loading="modal_loading" @click="oks">确定</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import cardsData from '@/components/cards/cards';
    import searchFrom from '@/components/publicSearchFrom';
    import { mapState } from 'vuex';
    import { cashListApi, cashEditApi, refuseApi } from '@/api/finance';
    import { formatDate } from '@/utils/validate';
    import editFrom from '@/components/from/from';
    export default {
        name: 'cashApply',
        components: { cardsData, searchFrom, editFrom },
        filters: {
            formatDate (time) {
                if (time !== 0) {
                    let date = new Date(time * 1000);
                    return formatDate(date, 'yyyy-MM-dd hh:mm');
                }
            }
        },
        data () {
            return {
                modal_loading: false,
                fail_msg: {
                    message: '输入信息不完整或有误!'
                },
                modals: false,
                total: 0,
                cardLists: [],
                loading: false,
                columns: [
                    {
                        title: 'ID',
                        key: 'id',
                        width: 80
                    },
                    {
                        title: '用户信息',
                        slot: 'nickname',
                        minWidth: 180
                    },
                    {
                        title: '提现金额',
                        slot: 'extract_price',
                        minWidth: 90
                    },
                    {
                        title: '提现方式',
                        slot: 'extract_type',
                        minWidth: 150
                    },
                    {
                        title: '收款码',
                        slot: 'qrcode_url',
                        minWidth: 150
                    },
                    {
                        title: '添加时间',
                        slot: 'add_time',
                        minWidth: 100
                    },
                    {
                        title: '备注',
                        key: 'mark',
                        minWidth: 100
                    },
                    {
                        title: '审核状态',
                        slot: 'status',
                        minWidth: 180
                    },
                    {
                        title: '操作',
                        slot: 'createModalFrame',
                        fixed: 'right',
                        width: 100
                    }
                ],
                tabList: [],
                fromList: {
                    title: '选择时间',
                    custom: true,
                    fromTxt: [
                        { text: '全部', val: '' },
                        { text: '今天', val: 'today' },
                        { text: '本周', val: 'week' },
                        { text: '本月', val: 'month' },
                        { text: '本季度', val: 'quarter' },
                        { text: '本年', val: 'year' }]
                },
                treeData: {
                    withdrawal: [
                        {
                            title: '提现状态',
                            value: ''
                        },
                        {
                            title: '未通过',
                            value: -1
                        },
                        {
                            title: '未提现',
                            value: 0
                        },
                        {
                            title: '已通过',
                            value: 1
                        }
                    ],
                    payment: [
                        {
                            title: '提现方式',
                            value: ''
                        },
                        {
                            title: '支付宝',
                            value: 'alipay'
                        },
                        {
                            title: '银行卡',
                            value: 'bank'
                        },
                        {
                            title: '微信',
                            value: 'wx'
                        }
                    ]
                },
                formValidate: {
                    status: '',
                    extract_type: '',
                    nireid: '',
                    data: '',
                    page: 1,
                    limit: 20
                },
                extractStatistics: {},
                timeVal: [],
                FromData: null,
                extractId: 0
            }
        },
        computed: {
            ...mapState('admin/layout', [
                'isMobile'
            ]),
            labelWidth () {
                return this.isMobile ? undefined : 80;
            },
            labelPosition () {
                return this.isMobile ? 'top' : 'left';
            }
        },
        mounted () {
            this.getList();
        },
        methods: {
            // 无效
            invalid (row) {
                this.extractId = row.id;
                this.modals = true;
            },
            // 确定
            oks () {
                this.modal_loading = true;
                setTimeout(() => {
                    refuseApi(this.extractId, this.fail_msg).then(async res => {
                        this.$Message.success(res.msg);
                        this.modal_loading = false;
                        this.modals = false;
                        this.$Message.success(res.msg);
                        this.getList();
                    }).catch(res => {
                        this.$Message.error(res.msg);
                    })
                }, 1000);
            },
            // 通过
            adopt (row, tit, num) {
                let delfromData = {
                    title: tit,
                    num: num,
                    url: `finance/extract/adopt/${row.id}`,
                    method: 'put',
                    ids: ''
                };
                this.$modalSure(delfromData).then((res) => {
                    this.$Message.success(res.msg);
                    this.getList();
                }).catch(res => {
                    this.$Message.error(res.msg);
                });
            },
            // 具体日期
            onchangeTime (e) {
                this.timeVal = e;
                this.formValidate.data = this.timeVal.join('-');
                this.formValidate.page = 1;
                this.getList();
            },
            // 选择时间
            selectChange (tab) {
                this.formValidate.page = 1;
                this.formValidate.data = tab;
                this.timeVal = [];
                this.getList();
            },
            // 选择
            selChange () {
                this.formValidate.page = 1;
                this.getList();
            },
            // 列表
            getList () {
                this.loading = true;
                cashListApi(this.formValidate).then(async res => {
                    let data = res.data
                    this.tabList = data.list.list;
                    this.total = data.list.count;
                    this.extractStatistics = data.extract_statistics.data;
                    this.cardLists = [
                        { 'col': 6, 'count': this.extractStatistics.price, 'name': '待提现金额', className: 'md-basket' },
                        { 'col': 6, 'count': this.extractStatistics.brokerage_count, 'name': '佣金总金额', className: 'md-pricetags' },
                        { 'col': 6, 'count': this.extractStatistics.priced, 'name': '已提现金额', className: 'md-cash' },
                        { 'col': 6, 'count': this.extractStatistics.brokerage_not, 'name': '未提现金额', className: 'ios-cash' }
                    ];
                    this.loading = false;
                }).catch(res => {
                    this.loading = false;
                    this.$Message.error(res.msg);
                })
            },
            pageChange (index) {
                this.formValidate.page = index;
                this.getList();
            },
            // 编辑
            edit (row) {
                cashEditApi(row.id).then(async res => {
                    if (res.data.status === false) {
                        return this.$authLapse(res.data);
                    }
                    this.FromData = res.data;
                    this.$refs.edits.modals = true;
                }).catch(res => {
                    this.$Message.error(res.msg);
                })
            },
            // 编辑提交成功
            submitFail () {
                this.getList();
            }
        }
    }
</script>
<style scoped lang="stylus">
    .ivu-mt .type .item
        margin:3px 0;
    .tabform
        margin-bottom 10px
    .Refresh
        font-size 12px
        color #1890FF
        cursor pointer
    .ivu-form-item
        margin-bottom 10px
    .status >>> .item~.item
        margin-left 6px
    .status >>> .statusVal
        margin-bottom 7px
    /*.ivu-mt >>> .ivu-table-header*/
    /*    border-top:1px dashed #ddd!important*/
    .type
       padding 3px 0
       box-sizing border-box
    .tabBox_img
        width 36px
        height 36px
        border-radius:4px
        cursor pointer
        img
            width 100%
            height 100%
</style>
